import React, { Suspense, Fragment, useEffect } from 'react';
import { useRoutes } from 'react-router-dom';
import Router from './router'
import { DotLoading } from 'antd-mobile'
// import Publish from './pages/Publish';
import { appBack } from './hook/appBack';
// import { check } from './api/index';
import "./App.css"
import { useDispatch, useSelector } from 'react-redux';
import { logout } from './store/reducer/authSlice';
//Suspense,


function App() {
  const element =  useRoutes(Router)
  const auth = useSelector(state => state.auth)
  const dispatch = useDispatch()
  useEffect(()=>{
    const timeout = auth.expirationTime - Date.now();
    if(timeout<60000){
      dispatch(logout())
      return 
    }
    const timer = setTimeout(()=>{
      dispatch(logout())
    }, timeout)

    appBack()

    return () => {
      clearTimeout(timer);
    };

  },[auth,dispatch])

  return (
    <Fragment>
      <>
        <Suspense fallback={
                      <DotLoading />
                    }>
            {element}
        </Suspense>
      </>
    </Fragment>
  );
}

export default App;
